<template>
  <div class="grid-container">
    <div class="grid-content">
      <el-table :data="tableData" v-loading.body="loading" stripe border style="width: 100%">
        <el-table-column prop="product.PRODCHINM" label="品名" width="200"></el-table-column>
        <el-table-column
          prop="PRODUCTCD"
          :render-header="serachHeader"
          column-key="PRODUCTCD"
          label="产品代码"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="EBELN"
          :render-header="serachHeader"
          column-key="EBELN"
          label="发票号"
          width="150"
        ></el-table-column>
        <el-table-column prop="ERFMG" label="数量" width="80"></el-table-column>
        <el-table-column
          prop="LGORT"
          :render-header="serachHeader"
          column-key="LGORT"
          label="库位号"
          width="100"
        ></el-table-column>
        <el-table-column label="创建日期" width="200">
          <template slot-scope="scope">
            <span class="color-gred">{{scope.row.created_at}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="grid-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="query.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.limit"
        layout="total,->, prev, pager, next, jumper, sizes"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { enter } from "@/api/statistics";
export default {
  name: "location",
  data: function() {
    return {
      query: {
        page: 1,
        limit: 20
      },
      total: 0,
      loading: true,
      tableData: [],
      dialogVisible: false,
      detail: {}
    };
  },
  mounted: function() {
    this.loadData();
  },

  methods: {
    serachHeader(h, { column, $index }, index) {
      return (
        <div class="header-custom-stype">
          <el-input
            v-model={this.query[column.columnKey]}
            placeholder={column.label}
            nativeOn-keyup={arg => arg.keyCode === 13 && this.loadData()}
            prefix-icon="el-icon-search"
          />
        </div>
      );
    },
    loadData: function() {
      this.loading = true;
      enter(this.query).then(response => {
        this.total = response.data.total;
        this.tableData = response.data.data;
      });

      setTimeout(() => {
        this.loading = false;
      }, 2000);
    },
    handleSizeChange: function(val) {
      this.query.limit = val;
      this.loadData();
    },
    handleCurrentChange: function(val) {
      this.query.page = val;
      this.loadData();
    },
    showDetail: function(detail) {
      this.detail = detail;
      this.dialogVisible = true;
    }
  }
};
</script>
<style lang="less">
.grid-container {
  height: auto;
  overflow: hidden;
  .action-column {
    text-align: right;
  }
  .color-gred {
    color: #999;
  }
}
.el-dialog--dl-small {
  width: 600px;
}
</style>